<template>
	<el-dropdown trigger="click" @command="handleSetLanguage" class="language-dropdown">
		<i :class="'iconfont icon-zhongyingwen'" class="toolBar-icon"></i>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item :disabled="language && language === 'zh'" command="zh">
					<el-image :src="'/src/assets/images/cn.svg'" style="width: 16px; height: 16px; vertical-align: middle; margin-right: 8px;"></el-image>
					{{ $t('common.chinese') }}
				</el-dropdown-item>
				<el-dropdown-item :disabled="language === 'en'" command="en">
					<el-image :src="'/src/assets/images/en.svg'" style="width: 16px; height: 16px; vertical-align: middle; margin-right: 8px;"></el-image>
					{{ $t('common.english') }}
				</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
</template>

<script setup>
import { computed, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { GlobalStoreHooks } from "@/stores";
import { getBrowserLang } from "@/utils/util";

const i18n = useI18n();
const globalStore = GlobalStoreHooks();
const language = computed(() => globalStore.language);

// 切换语言
const handleSetLanguage = lang => {
	i18n.locale.value = lang;
	globalStore.updateLanguage(lang);
	// 可以在这里添加语言切换的动画效果或其他逻辑
	console.log(`Language switched to: ${lang}`);
};

onMounted(() => {
	// 初始化语言，如果store中没有语言设置，则使用浏览器语言
	const defaultLang = language.value || getBrowserLang();
	handleSetLanguage(defaultLang);
});
</script>

<style scoped>
.language-dropdown {
	cursor: pointer;
}

.toolBar-icon {
	font-size: 20px;
	transition: all 0.3s;
}

.toolBar-icon:hover {
	color: var(--el-color-primary);
}
</style>
